/**********
    @name: 分页器组件
    @describtion:
    * 列表类页面分页器组件规范
    * props:接收参数
        loading="" 加载状态    返回bool值
        total: 总数
        pageSize: 每页条数
        currentPage: 当前页码
        options: 操作项JSON 对象数组        [...,{value: 1,label: '删除'}]
        allChooseBtn: 全选按钮
        checkedNum: 已选条数
    * emit:自定义事件 作为操作回调返回给父组件
        checkOption: 选择操作项回调 返回对象值
        changeSize: 切换每页条数 返回每页条数
        currentPage: 当前页码 返回当前页码
        changePageChoose: 切换此页全选项    返回bool值
        changeAllChoose: 切换全部全选状态   返回bool值
    @author:liubingye
    @date:2022-12-14 15:31:33
***********/
<template>
  <!-- 通用分页器 -->
  <el-affix v-if="props.total" position="bottom" :offset="0" ref="affixRef">
    <div class="page-pagination" >
      <div class="option-wrap">
        <div class="choose-check-box" v-show="canChoose">
          <el-checkbox v-model="pageChooseBtn" v-show="showChoose === 'page'" label="选择此页" @change="handlePageChoose"/>
          <el-checkbox v-model="allChooseBtn" v-show="showChoose === 'all'" label="选择所有" @change="handleAllChoose"/>
          <el-icon ref="selectRef" v-click-outside="onClickSelect"><ArrowDown /></el-icon>
        </div>
        <el-popover
            ref="popoverRef"
            popper-style="min-width: 100px;"
            :virtual-ref="selectRef"
            :width="100"
            trigger="click"
            virtual-triggering
        >
          <el-checkbox v-model="pageChooseBtn" label="选择此页" @change="handlePageChoose"/>
          <el-checkbox v-model="allChooseBtn" label="选择所有" @change="handleAllChoose"/>
        </el-popover>
        <div v-show="checkedNum === 0">
          <el-tooltip content="更新列表" placement="bottom" effect="light">
            <el-button text style="margin-left: 0;" @click="handleRefresh"><i class="iconfont">&#xe675;</i></el-button>
          </el-tooltip>
        </div>
        <div class="operator-box" v-show="checkedNum !== 0">
          <el-button text class="invert-choose" @click="handleInvert" plain>反选</el-button>
          <el-button text style="margin-left: 0;" @click="handleCancel">取消</el-button>
          <p class="chose-text">已选<span>{{ checkedNum }}</span>条</p>
          <el-tooltip :content="item.name" v-for="item in props.options.slice(0,2)" :key="item.value" effect="light" placement="bottom">
            <a class="option-icon-btn" href="javascript:;" @click="handleOption(item.value)">
              <i class="iconfont" v-html="item.icon"></i>
            </a>
          </el-tooltip>
          <el-popover
              ref="btnPopover"
              v-if="props.options.length > 2"
              trigger="click"
              placement="top-start"
              :width="110"
              popper-style="min-width: 100px;padding: 10px 0;"
          >
            <template #reference>
              <div>
                <el-tooltip content="更多操作" effect="light" placement="bottom">
                  <a class="option-icon-btn more" href="javascript:;">
                    <i class="iconfont">&#xe6dc;</i>
                  </a>
                </el-tooltip>
              </div>
            </template>
            <template #default>
              <li class="option-list-btn" v-for="item in props.options.slice(2)" :key="item.value" @click="handleOption(item.value)">
                <i class="iconfont" v-html="item.icon"></i>
                <span>{{item.name}}</span>
              </li>
            </template>
          </el-popover>
        </div>
      </div>
      <el-pagination
          :currentPage="props.currentPage"
          :page-size="props.pageSize"
          :page-sizes="[10,15,30,50]"
          layout="total, sizes, prev, pager, next, jumper, slot"
          :total="props.total"
          @update:current-page="handleCurrentChange"
          @update:page-size="handleSizeChange"
      >
        <el-button type="primary" text>
          确认
        </el-button>
      </el-pagination>
    </div>
  </el-affix>
</template>

<script setup>
import {defineProps, ref, defineEmits, watch, computed, unref} from "vue";
import { ClickOutside as vClickOutside } from 'element-plus'
import { ArrowDown } from '@element-plus/icons-vue'

const props = defineProps({
  //总数
  total: {
    type: Number,
    default: 0
  },
  //每页条数
  pageSize: {
    type: Number,
    default: 15,
  },
  //当前页
  currentPage: {
    type: Number,
    default: 1
  },
  //操作项
  options: {
    type: Array,
    default: () => {return []}
  },
  //是否全选按钮
  allChoose: {
    type: Boolean,
    default: false
  },
  //是否此页全选按钮
  pageChoose: {
    type: Boolean,
    default: false
  },
  checkedNum: {
    type: Number,
    default: 0
  },
  canChoose: {
    type: Boolean,
    default: true
  },
  loading: { //加载状态
    type: Boolean,
    default: null
  },
})
const allChooseBtn = ref(props.allChoose)
const pageChooseBtn = ref(props.pageChoose)
const checkedNum = ref(props.checkedNum)
const canChoose = computed(() => {return props.canChoose})
const showChoose = ref('page')
// 监听props变化
watch(props,(newVal) => {
  allChooseBtn.value = newVal.allChoose
  pageChooseBtn.value = newVal.pageChoose
  checkedNum.value = newVal.checkedNum
},{deep:true})
const emit = defineEmits(['checkOption','changeSize','currentChange','changePageChoose','changeAllChoose','invertChoose', 'cancelChoose', 'refreshList'])
const handleCurrentChange = (page) =>{
  // 返回页码
  emit('currentChange',page)
}
const handleSizeChange = (size) => {
  // 返回size
  emit('changeSize',size)
}

const handleOption = (val) => {
  // 返回操作选项
  emit('checkOption',val)
  if(btnPopover.value) {
    btnPopover.value.hide()
  }

}
//此页全选
const handlePageChoose = (val) => {
  showChoose.value = 'page'
  emit('changePageChoose',val)
}
//全部全选
const handleAllChoose = (val) => {
  showChoose.value = 'all'
  emit('changeAllChoose',val)
}
//反选
const handleInvert = () => {
  emit('invertChoose')
}
// 取消
const handleCancel = () => {
  emit('cancelChoose')
}
// 刷新
const handleRefresh = () => {
  emit('refreshList')
}
// 下拉
const selectRef = ref()
const popoverRef = ref()
const onClickSelect = () => {
  unref(popoverRef).popoverRef?.delayHide?.()
}
const btnPopover = ref()

const affixRef = ref()
const handleUpdateAffixRef = () => {
  if(affixRef.value) {
    affixRef.value.updateRoot();
  }
}
// 初始化时更新分页器固定位置
watch(props, () => {
  if(!props.loading) { //如果传了加载状态，直接更新
    handleUpdateAffixRef()
  }
  else if(props.loading === null) { //否则使用延迟更新（如果接口响应超过一秒则无法更新）
    setTimeout(() => { 
      handleUpdateAffixRef()
    }, 1000);
  }
},{deep:true})
</script>

<style scoped lang="scss">
.page-pagination{
  height: 64px;
  background-color: $white;
  border-top: 1px solid $weightBar;
  display: flex;justify-content: space-between;align-items: center;
}
.option-wrap{
  display: flex;
  align-items: center;
  //.el-checkbox+.el-checkbox{
  //  margin-left: 10px;
  //}
  .invert-choose{
    margin-left: 10px;
  }
  .chose-text{
    color: $black_tips;
    padding: 0 10px 0 20px;
    font-size: 14px;
    line-height: 14px;
    span{
      color: #FF5240;
    }
  }
  .choose-check-box{
    box-sizing: border-box;
    height: 32px;
    width: 118px;
    display: flex;
    align-items: center;
    border: var(--el-border);
    border-radius: 4px;
    padding: 0 15px;
    i{
      font-size: 12px;
      color: #AAAAAA;
      padding-left: 6px;
      cursor: pointer;
    }
  }
  .operator-box{
    display: flex;
    align-items: center;
    .option-icon-btn{
      display: flex;
      justify-content: center;
      align-items: center;
      height: 26px;
      width: 26px;
      margin-right: 10px;
      border-radius: 4px;
      transition: all 0.2s;
      i{
        font-size: 16px;
      }
      &:hover{
        box-shadow: 0 0 10px rgba(0,0,0,0.1);
        background-color: $focusContent;
      }
    }
    .option-icon-btn.more{
      i{
        font-size: 24px;
      }
    }
  }
}
.option-list-btn{
  display: flex;
  align-items: center;
  cursor: pointer;
  width: 110px;
  box-sizing: border-box;
  padding: 0 10px;
  transition: all 0.2s;
  height: 30px;
  span{
    margin-left: 10px;
  }
  &:hover{
    background-color: $focusContent;
  }
}
</style>
